<template>
  <section class="v-mapping">
    <section class="v-mapping-inner">
      <div class="v-mapping-inner-left">展示字段映射</div>
      <div class="v-mapping-inner-right" @click="handleLink">
        {{ value && value ? '已设置' : '去设置' }}
        <i class="el-icon-arrow-right" />
      </div>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VMapping',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  computed: {
    type() {
      return this.option.type || 'default'
    },
    list() {
      return this.option.list || []
    },
    layout() {
      return this.option.layout || 'horizon'
    }
  },
  methods: {
    getValue() {
      return this.value
    },

    setValue(v) {
      this.$set(this, 'value', v)
    },

    async handleLink() {
      const { default: DialogLinks } = await import('@/components/CustomPage/pagemaker/mapping')
      this.$modal.show(DialogLinks, {
        title: '设置',
        fn: this.mappingComit,
        upValue: this.getValue() === undefined ? this.getInitData() : this.getNewData()
      }, {
        width: 800,
        height: 'auto',
        clickToClose: false
      })
    },
    getNewData() {
      const list = this.getValue()
      const oList = this.option.list || []
      const newList = []
      oList.forEach(item => {
        const obj = {
          name: item.name,
          code: item.code,
          value: ''
        }
        const curObj = list.find(i => {
          return i.code === item.code
        })
        if (curObj !== undefined && curObj.value !== '') {
          obj.value = curObj.value
        }
        newList.push(obj)
      })
      return newList
    },
    getInitData() {
      return this.option.list || []
    },
    mappingComit(params) {
      this.value = params
      this.handleChange()
    },

    handleChange(e) {
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
.v-mapping {
  &-inner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-right {
      cursor: pointer;
      color: $a1;
    }
  }
}
</style>
